<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
</head>
<body>
	<div class="page_content">


    <div class="groupTitle"><span>说明</span></div>
      	
如果是需要实现数据列表，推荐使用grid表格而不是table表格，table主要用来实现表单布局或者一些简单、静态的数据展现。<br/>
      <div class="height_15"></div>
      


    <div class="groupTitle"><span>1、简单数据</span></div>
      	
<table class="tableStyle">
	<tr>
		<th>姓名</th><th>性别</th><th>年龄</th>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
</table>

<div class="groupTitle"><span>2、自定义宽度</span></div>
      	宽度默认100%，如果想自义宽度，为table设置style，例如style="width:500px;"
<table class="tableStyle" style="width:500px;">
	<tr>
		<th>姓名</th><th>性别</th><th>年龄</th>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
</table>


      <div class="height_30"></div>
     
      

    <div class="groupTitle"><span>3、渲染的列表</span></div>
  框架对其渲染。默认效果是：表格间隔换色、鼠标移入行变色、点击单行变色。    	
<table class="tableStyle" mode="list">
	<tr>
		<th>姓名</th><th>性别</th><th>年龄</th>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
</table>


      <div class="height_30"></div>
      


    <div class="groupTitle"><span>4、渲染的列表-多行点击变色</span></div>
      	
<table class="tableStyle" mode="list" useMultColor="true">
	<tr>
		<th>姓名</th><th>性别</th><th>年龄</th>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td>
	</tr>
</table>

      <div class="height_30"></div>
      


    <div class="groupTitle"><span>5、渲染的列表-文字折行</span></div>
  渲染的列表文字默认是不折行的，需要的话设置fixedCellHeight属性为true    	
<table class="tableStyle" mode="list" fixedCellHeight="true">
	<tr>
		<th width="150">姓名</th><th width="150">性别</th><th width="150">年龄</th><th>备注</th>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td><td>备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td><td>备注信息</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td><td>备注信息</td>
	</tr>
	<tr>
		<td>张小三</td><td>男</td><td>25</td><td>备注信息</td>
	</tr>
</table>


      <div class="height_30"></div>
      


    <div class="groupTitle"><span>6、formMode表单布局-transparent模式</span></div>
 <div style="width:600px;">   	
<form>
	<table class="tableStyle" formMode="transparent">
		<tr><td>用户名：</td><td><input type="text"/></td></tr>
		<tr><td>密码：</td><td><input type="password"/></td></tr>	
		<tr><td>民族：</td><td><select><option value="1">汉族</option><option value="2">满族</option><option value="3">维吾尔族</option></select></td></tr>
		<tr><td>常用地址：</td><td><textarea></textarea></td></tr>
		<tr><td colspan="2"><input type="reset" value="重置"/>&nbsp; <input type="submit" value="提交" class="primary"/></td></tr>
	</table>
</form>
</div>  
      <div class="height_30"></div>



    <div class="groupTitle"><span>7、formMode表单布局-view模式</span></div>
   view模式适合放置详细信息。
另外view模式下，td中的文字过长会自动折行   	
<form>
	<table class="tableStyle" formMode="view">
		<tr><th colspan="4">详细信息</th></tr>
		<tr><td>姓名：</td><td>张小三</td><td>性别：</td><td>男</td></tr>
		<tr><td>曾用名：</td><td>张三</td><td>婚姻情况：</td><td>未婚</td></tr>
		<tr><td>籍贯：</td><td>黑龙江</td><td>民族：</td><td>汉族</td></tr>
		<tr><td>职业：</td><td>软件设计师</td><td>学历：</td><td>本科毕业</td></tr>
		<tr><td>邮编：</td><td>100110</td><td>电话：</td><td>010-00000000</td></tr>
		<tr><td>地址：</td><td>北京市海淀区</td><td>爱好：</td><td>唱歌 跳舞</td></tr>
	</table>
</form>
.
      <div class="height_30"></div>


      <div class="groupTitle"><span>8、表单布局-formStyle</span></div>
transparent模式只适合每行列数为偶数，复杂布局不适用。<br/>
复杂布局可以使用formStyle对表格做基本样式设置，然后手动设置td对齐等	
<div style="width:550px;">
<form>
	<table class="formStyle">
		<tr><td class="ali03" width="100">用户名：</td><td><input type="text"/></td></tr>
		<tr><td class="ali03">密码：</td><td><input type="password"/></td></tr>	
		<tr><td class="ali03">民族：</td><td><select><option value="1">汉族</option><option value="2">满族</option><option value="3">维吾尔族</option></select></td></tr>
		<tr><td class="ali03">常用地址：</td><td><textarea></textarea></td></tr>
		<tr><td colspan="2" class="ali02"><input type="reset" value="重置"/>&nbsp; <input type="submit" value="提交" class="primary"/></td></tr>
	</table>
</form>
</div>

      <div class="height_30"></div>
   </div>


<script type="text/javascript">
function getRadioRow(){
	var msg="";
	msg=$("#radioTable").find("input[type=radio]").filter("[checked]").val();
	top.Dialog.alert(msg);
}
function getCheckBoxRow(){
	var msg="";
	$("#checkboxTable").find("input[type=checkbox]").each(function(){
		if($(this).attr("checked")){
			msg=msg+","+$(this).val()
		}
	})
	if(msg==""){
		msg="无选择"
	}
	top.Dialog.alert(msg);
}
</script>
</body>
</html>